<template>
	<view class="container">
		<view class="lists">
			<view v-for="(items,index) in mess_list" @click="noticeNavTo(items)">
				<view class="lists-times">{{items.created_at}}</view>
				<view class="lists-items">
					<view class="lists-title">{{items.title}}</view>
					<view>
						<image :src="items.filepath" mode="widthFix" lazy-load v-if="items.filepath"></image>
					</view>
					<view class="lists-info">{{items.abstract}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tools from "../../common/tools"
	import apimessage from '../../common/api/message';
	export default {
		data() {
			return {
				mess_list:[],
				params_notice:{
					type:'',
					page:1,
					page_size:10,
				}
			}
		},
		onLoad(option){
			this.params_notice.type = option.type
			this.get_list()
		},
		methods: {
			//消息列表
			get_list(){
				apimessage.mess_typelist(this.params_notice).then(res =>{
					if(res.code == 1){
						this.mess_list = res.data
					}
				}).catch(cateres =>{
					
				});
			},
			
			//公告详情
			noticeNavTo(item){
				uni.navigateTo({
					url:'detail?id='+item.id
				})
			},
		}
	}
</script>

<style lang='scss'>
	page{
		background-color: #F5F5F5;
	}
	.zhanwei{
		height:20upx;
	}
	.notices-list{
		margin:0 auto;
		border-radius:20upx;
		width:95%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
		padding:30upx 0;
		background-color:#FFFFFF;
		.notices-item{
			flex: 1;
			text-align: center;
			position: relative;
			.notices-num{
				position:absolute;
				width:40upx;
				height:40upx;
				line-height:40upx;
				color:#FFFFFF;
				border-radius:20upx;
				background-color:#FF3333;
				right:30upx;
				top:-20upx;
			}
			image{
				width:90upx;
				height:90upx;
				border-radius:10upx;
			}
		}
	}
	.notice_flag{
		width:100%;
		margin:0 auto;
		text-align:center;
		padding-top:20upx;
		image{
			width:30upx;
			padding-right:10upx;
		}	
	}
	.lists{
		width:96%;
		margin:0 auto;
		.lists-items{
			padding:2%;
			background-color:#FFFFFF;
			border-radius:10upx;
		}
		.lists-times{
			text-align:center;
			padding:10upx 0;
			color:#999999;
		}
		.lists-title{
			padding:5upx 0;
			font-weight:bold;
		}
		.lists-info{
			color:#999999;
		}
	}
</style>
